<template>
  <view>
    <view class="title">权限申请审批列表</view>
    <view v-if="applications.length === 0">暂无待审批申请</view>
    <view v-else>
      <view v-for="app in applications" :key="app.id" class="application-item">
        <view>申请人ID: {{ app.userId }}</view>
        <view>申请角色: {{ app.role === 0 ? '管理员' : '创作者' }}</view>
        <view>申请理由: {{ app.reason }}</view>
        <view>申请时间: {{ app.createTime }}</view>
        <view>
          <button @click="approve(app.id)">批准</button>
          <button @click="showRejectDialog(app.id)">拒绝</button>
        </view>
      </view>
    </view>

    <!-- 拒绝理由弹窗 -->
    <view v-if="showRejectModal" class="modal">
      <view class="modal-content">
        <text>拒绝理由</text>
        <textarea v-model="rejectReason" placeholder="请输入拒绝理由"></textarea>
        <button @click="reject(currentAppId)">确认拒绝</button>
        <button @click="closeRejectModal">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
import { clearStorageAll,getUserInfo } from "../../../utils/auth.js"
export default {
  data() {
    return {
      applications: [
		  { 
			  id: 1,
			  userId: 1,
			  admin_id: 9,
			  role: 1,
			  reason: "test",
			  status: 'PENDING',
			  reject_reason: 'iewe',
			  createTime: "2025-04-13 21:04:06",
			  updateTime: "2025-04-13 21:04:06"
		  }
	  ],
      showRejectModal: false,
      rejectReason: '',
      currentAppId: null
    };
  },
  onLoad() {
    this.loadApplications();
  },
  methods: {
    async loadApplications() {
      const res = await uni.request({
        url: 'http://localhost:8080/api/applications/pending', // 替换为你的后端地址
        method: 'GET'
      });
      if (res.statusCode === 200) {
        this.applications = res.data;
      }
    },
    async approve(id) {
		console.log(getUserInfo().role)
		if(getUserInfo().role != 0) {
			uni.showToast({
				title: '请升级权限',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
      const res = await uni.request({
        url: `http://localhost:8080/api/applications/${id}/approve`,
        method: 'POST'
      });
      if (res.statusCode === 200) {
        uni.showToast({ title: '批准成功', icon: 'success' });
        this.loadApplications();
      }
    },
    showRejectDialog(id) {
		if(getUserInfo().role != 0) {
			uni.showToast({
				title: '请升级请求',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
      this.currentAppId = id;
      this.showRejectModal = true;
    },
    closeRejectModal() {
      this.showRejectModal = false;
      this.rejectReason = '';
    },
    async reject() {
      if (!this.rejectReason) {
        uni.showToast({ title: '请输入拒绝理由', icon: 'none' });
        return;
      }
      const res = await uni.request({
        url: `http://localhost:8080/api/applications/${this.currentAppId}/reject`,
        method: 'POST',
        data: { rejectReason: this.rejectReason }
      });
      if (res.statusCode === 200) {
        uni.showToast({ title: '拒绝成功', icon: 'success' });
        this.closeRejectModal();
        this.loadApplications();
      }
    }
  }
};
</script>

<style>
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.application-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}
button {
  margin-right: 10px;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 80%;
}
textarea {
  width: 100%;
  height: 80px;
  margin: 10px 0;
}
</style>